/**
 * Created by zhulizhe on 2017/6/10.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Picker,
    Dimensions,
    ScrollView,
    PixelRatio
} from 'react-native';
import Modal from 'react-native-modalbox';
import Constant from '../Contant'
import DateUtil from '../common/DateUtil'
let {width} = Dimensions.get('window');

/**
 * 配送时间组件
 */

const dates = [DateUtil.getDate(),DateUtil.getDate(1)] ;
const times = ['09:00-11:00','11:00-13:00','13:00-15:00','15:00-17:00','17:00-19:00'];

export default class DeliverTimeChooser extends Component{

    constructor() {
        super();
        this.state = {
            isOpen: false,
            daySelect:0,
            timeSelect:0
        };
    }

    openModal(){
        this.refs.timeModal.open();
    }
    closeModal(){
        this.refs.timeModal.close();

    }
    render(){
        return <Modal
            position="bottom"
            isOpen={this.state.isOpen}
            style={[styles.modal]}
            backButtonClose={true}
            ref={"timeModal"}>
            <View style={{flexDirection:'row',flex:1}}>
                <View style={{flex:1,backgroundColor:'white'}}>
                {
                    dates.map((data,index)=>{
                        let day=index==0?'今天':'明天';
                        let color=this.state.daySelect==index?'#399cfe':'gray';
                        return <TouchableOpacity key={index} style={{alignItems:'center',padding:10,borderBottomColor:'#f5f5f5',borderBottomWidth:5 / PixelRatio.get()}}
                                                 onPress={()=>{
                                                     this.setState({
                                                         daySelect:index
                                                     })
                                                 }}
                              >
                            <Text style={{color:color}} >{day+'('+data.weekIndex+')'}</Text>
                        </TouchableOpacity>
                    })
                }
                </View>
                <View style={{flex:3,backgroundColor:'white'}}>
                    {
                        times.map((time,index)=>{
                            return <TouchableOpacity key={index} style={{alignItems:'center',padding:10,borderBottomColor:'#f5f5f5',borderBottomWidth:5 / PixelRatio.get()}}
                                onPress={()=>{
                                    this._ensure(index);
                                }}
                            >
                                <Text>{time}</Text>
                            </TouchableOpacity>
                        })
                    }
                </View>
            </View>
        </Modal>
    }
    _ensure(i){
        this.props.callbcak(dates[this.state.daySelect].day+' '+times[i]);
        this.closeModal();
    }
}

const styles = {
    modal: {
        height: 260,
        backgroundColor:'#f5f5f5'
    },
    title: {
        color: Constant.TEXTTITLECOLOR,
        fontSize: 13
    },
    blue: {
        color: Constant.BLUECOLOR,
        fontSize: 12
    },
};